<template>
    <div class="jd-order">
        <JdHeader title="购物车~订单" back></JdHeader>
        <van-form @submit="submitHandler">
            <van-cell-group inset>
                <van-field v-model="username" name="姓名" label="姓名" placeholder="姓名"
                    :rules="[{ required: true, message: '请填写姓名' }]" />
                <van-field v-model="phone" type="phone" name="手机号" label="手机号" placeholder="手机号"
                    :rules="[{ required: true, message: '请填写手机号' }]" />
            </van-cell-group>

            <van-field v-model="city" is-link readonly name="picker" label="选择器" placeholder="点击选择城市"
                @click="showPicker = true" />

            <van-popup v-model:show="showPicker" position="bottom">
                <van-area title="标题" @confirm="onConfirm" @cancel="showPicker = false" :area-list="areaList" />
            </van-popup>

            <van-cell-group inset>
                <van-field v-model="address" name="详细地址" label="详细地址" placeholder="详细地址"
                    :rules="[{ required: true, message: '请填写详细地址' }]" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>

            </div>
        </van-form>
        <!-- 展示订单信息 -->
        <JdOrderInfo v-if="showInfo" @finish="orderFinishHandler" :info="info" />
        <JdOrderList v-if="showList" />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { areaList } from '@vant/area-data';
import { updateAddressInfoApi } from '@/api/order'
import type { MyAddressInfo } from '@/config/interface'
import JdOrderInfo from './components/JdOrderInfo.vue';
import JdOrderList from './components/JdOrderList.vue';

// 准备表单需要的数据
const username = ref<string>('')
const phone = ref<string>('')
const city = ref<string>('')
const address = ref<string>('')
const showPicker = ref<boolean>(false)
const showInfo = ref<boolean>(false)
const showList = ref<boolean>(true)

// 准备一个信息
const info = ref()

const submitHandler = async () => {
    // console.log('我要提交表单');

    // 准备信息
    info.value = {
        userid: window.localStorage.getItem('user_id') as string,
        name: username.value,
        tel: phone.value,
        province: city.value.split('/')[0],
        city: city.value.split('/')[1],
        county: city.value.split('/')[2],
        addressDetail: address.value,
        time: window.localStorage.getItem('time') as string
    }

    const res = await updateAddressInfoApi(info.value)
    // console.log(info.value);

    console.log(res);

    // 当订单信息展示出来
    showInfo.value = true
}

const onConfirm = (info: { name: string, value: string }[]) => {
    // console.log(info,'确认选择');
    // 把选择到的内容组装成一个完整的字符串
    const str = info.reduce((prev, item) => {
        return prev + '/' + item.name
    }, '').slice(1)
    // console.log(str);

    // 把补充好的内容放在 city 信息内
    city.value = str
    // 关闭对话框
    showPicker.value = false

}

// 确认订单成功
const orderFinishHandler = () => {
    showInfo.value = false
    showList.value = true
}
</script>
<style scoped lang="scss">

</style>